import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import ComponentStore from '../../stores/ComponentStore';
import GraphStore, { AmountData } from '../../stores/GraphDataStore';
import Graph, { GraphProps } from '../../component/graph/graph';
import GraphPicker from '../../component/data_picker/DataPicker';

import { Icon } from 'antd-mobile';
import { Table } from 'antd';
import { mounthSelections, hotSelections, SelectionType } from '../../utils/common';
import { ColumnProps } from 'antd/lib/table/Column';

import './Data.scss';

interface DataProps {
  componentStore: ComponentStore;
  graphStore: GraphStore;
}

export interface GraphInfo {
  id: string;
  title: string;
  data?: AmountData;
}

const requesTypeColumns: ColumnProps<AmountData>[] = [
  {
    title: '序号',
    key: 'index',
    render: (text: string, row: AmountData, index: number) => {
      if (index < 5) {
        return index + 1;
      }
      return {
        children: <span> {row.name}</span>,
        props: { colSpan: 2 }
      };
    }
  },
  {
    title: '类别',
    key: 'category',
    dataIndex: 'name',
    render: (text: string, row: AmountData, index: number) => {
      if (index < 5) {
        return row.name;
      }
      return {
        props: { colSpan: 0 }
      };
    }

  },
  {
    title: '数量(个)',
    key: 'amount',
    dataIndex: 'value',
  },
  {
    title: '比例(%)',
    key: 'percent',
    render: function (text: string, data: AmountData, index: number) {
      return (data.value / 1249839 * 100).toFixed(2) + '%';
    }
  }
];

requesTypeColumns.forEach((v: ColumnProps<AmountData>) => { v.className = 'table-cell'; });

// 首页
@inject('componentStore', 'graphStore')
@observer
export default class Home extends Component<DataProps> {
  state = {
    toggleFlag: true
  };
  onClickIcon = (): void => {
    this.setState({ toggleFlag: !this.state.toggleFlag });
  }
  componentWillMount(): void {
    this.props.componentStore.getMessageList();
    this.props.graphStore.getGraphSelectionData();

    this.props.graphStore.getDistrictAcceptedData();
    this.props.graphStore.getOrgAcceptedTopTenData();
    this.props.graphStore.getRequestTopTenData();
    this.props.graphStore.getRequestTypeData();
    this.props.graphStore.getRequestTypeTableSource();
  }
  render(): JSX.Element {
    const { graphStore } = this.props;
    const graphList: GraphProps[] = [
      {
        data: graphStore.districtAcceptedData,
        containerId: 'districtAcceptedGraph',
        graphType: 'dataBar',
        graphTitle: '各行政区工单受理量统计',
        graphSelections: [mounthSelections]
      },
      {
        data: graphStore.orgAcceptedTopTenData,
        containerId: 'orgTopTenGraph',
        graphType: 'dataBar',
        graphTitle: '承办单位工单受理量TOP10',
        graphSelections: [mounthSelections]

      },
      {
        data: graphStore.hotRequestData,
        containerId: 'hotRequestTopTenGraph',
        graphType: 'dataBar',
        graphTitle: '热点诉求统计TOP10',
        graphSelections: [hotSelections]
      }
    ];

    const requestTypeGraph = {
      data: graphStore.requestTypeData,
      containerId: 'requestTypeGraph',
      graphType: 'dataPie',
      graphTitle: '诉求分类统计',
      graphSelections: [mounthSelections]
    };
    
    const requestTypePickerList: SelectionType[][][] = [mounthSelections];
    return (
      <div className="home-container">
        <div className="graph-list">
          {
            graphList.map((v: GraphProps, i: number) =>
              (<div className="graph-list-item" key={v.graphTitle}>
                <div className="echart-container">
                  <div className="graph-header">
                    <div className="graph-title">{v.graphTitle}</div>
                    <span className="graph-title-date">(2017/1/1-2017/11/11)</span>
                    {
                      v.graphSelections.map(
                        (e: SelectionType[][], index: number) => (
                          <GraphPicker
                            className="picker-class"
                            graphSelections={e}
                            isCascade={false}
                            key={index}
                            pickerType={e[0][0].label !== 'date'}
                          />
                        ))
                    }
                  </div>
                  <Graph
                    graphProps={v}
                  />
                </div>
              </div>)
            )
          }
          <div className="graph-list-item">
            <Icon
              size="lg"
              type="left"
              style={{ position: 'absolute', top: '45%', left: '8px', zIndex: 100 }}
              onClick={this.onClickIcon}
            />
            <Icon
              size="lg"
              type="right"
              style={{ position: 'absolute', top: '45%', right: '8px', zIndex: 100 }}
              onClick={this.onClickIcon}
            />
            <div className="echart-container">
              <div className="graph-header">
                <div className="graph-title">诉求分类统计
                  <span className="graph-title-date">(2017/1/1-2017/11/11)</span>
                </div>
                {
                  requestTypePickerList.map(
                    (e: SelectionType[][], index: number) => (
                      <GraphPicker
                        className="picker-class"
                        graphSelections={e}
                        isCascade={false}
                        key={index}
                        pickerType={e[0][0].label !== 'date'}
                      />
                    ))
                }
              </div>
              {
                this.state.toggleFlag ? (
                  <Graph
                    graphProps={requestTypeGraph}
                  />
                ) : (
                    <Table
                      className="side-table"
                      rowKey="title"
                      columns={requesTypeColumns}
                      dataSource={graphStore.requestTypeTableSource}
                      bordered={true}
                      pagination={false}
                    />
                  )
              }

            </div>
          </div>
        </div>

      </div>
    );
  }
} 